import React, { Component } from 'react';
import Navbar from './navbar';
import { Routes, Route, Navigate }  from 'react-router-dom';
import Home from './content/home';
import Calculate from './content/calculate';
import Login from './content/login';
import Register from './content/register';
import NotFound from './content/notFound';
import $ from 'jquery';

class App extends Component {
    state = {
  
        is_login: true,
        username: 'user',
    } 

    render() { 
        return (
            <React.Fragment>
                <Navbar is_login={this.state.is_login} username={this.state.username}></Navbar>

                <div className='container'>
                    {/* 路由 path->页面 */}
                    <Routes>
                        <Route path='/calculator' element={<div style={{width:'100%',marginTop:'20px'}}><h1 style={{width:'200px',margin:'0 auto'}}>欢迎使用</h1></div>}></Route>
                        <Route path='/calculator/home' element={<Home></Home>}></Route>
                        {/* 未登录/登录时重定向 */}
                        <Route path='/calculator/calculate' element={this.state.is_login ? <Calculate></Calculate> : <Navigate replace to='/calculator/login' /> }></Route>
                        <Route path='/calculator/login' element={this.state.is_login ? <Navigate replace to='/calculator/home' />: <Login></Login> }></Route>
                        <Route path='/calculator/register' element={this.state.is_login ? <Navigate replace to='/calculator/home' />: <Register></Register> }></Route>
                        <Route path='/calculator/404' element={<NotFound></NotFound>}></Route>
                        {/* 重定向 */}
                        <Route path='/calculator/*' element={<Navigate replace to='/calculator/404' />}></Route>
                    </Routes>

                </div>

            </React.Fragment>
        );
    }
}
 
export default App;